{extend name="common@base" /}
{block name="head_extend"}{/block}
{block name="title"}安装流程{/block}

{block name="body_header"}{/block}

{block name="body"}
<div class="container">
    <div class="row" style="height: 100px"></div>
</div>

<div class="container">
<div class="col-md-4">
    <div>

        <!-- Tab panes -->

    </div>
</div>
    <div class="col-md-4">
        <ul class="nav nav-tabs nav-justified" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">签署协议</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">数据库配置</a></li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="home">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        开始安装
                    </div>
                    <div class="panel-body">
                        <div class="page-header">
                            <h1>安装须知<small>111</small></h1>
                        </div>
                        <div class="well" data-options="url:''">
                            须知内容：
                        </div>
                    </div>
                    <div class="panel-footer">
                        <div class="container-fluid">
                            <div class="col-md-1 col-md-offset-1"><a href="/install/index/install" class="btn btn-success" id="agree">同 意</a></div>
                            <div class="col-md-1 col-md-offset-8"><a href="javascript:window.opener=null;window.open('','_self');window.close();" class="btn btn-default">取消</a></div>
                        </div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="profile">
                <form action="{$_form.install_install}" id="form" class="form  text-center" method="post">
                    <div class="form-group">
                        <label for="hostname">数据库地址</label>
                        <input type="text" class="form-control" name="hostname" id="hostname" placeholder="127.0.0.1">
                    </div>
                    <div class="form-group">
                        <label for="database">数据库名称</label>
                        <input type="text" class="form-control" name="database" id="database" placeholder="vovoqi">
                    </div>
                    <div class="form-group">
                        <label for="username">数据库用户名</label>
                        <input type="text" class="form-control" name="username" id="username" placeholder="root">
                    </div>
                    <div class="form-group">
                        <label for="password">数据库密码</label>
                        <input type="password" class="form-control" name="password" id="password" placeholder="root">
                    </div>
                    <div class="form-group">
                        <label for="hostport">数据库端口</label>
                        <input type="number" class="form-control" name="hostport" id="hostport" placeholder="3306">
                    </div>
                    <div class="form-group">
                        <div class="col-md-6">
                            <a href="#" id="testDBConnect" class="btn btn-warning">测试连接</a>
                        </div>
                        <div class="col-md-6">
                            <input type="submit" class="btn btn-default">
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
    <div class="col-md-4">

    </div>
</div>
<script>
    $(function () {
        $('#agree').on('click',function () {
            $('a[href="#home"]').on('show.bs.tab', function(e) {
                e.preventDefault();
            });
            $('a[href="#profile"]').tab('show');
            $('a[href="#home"]').parent().css('background','#dadada');
            return false;
        });
        $('#testDBConnect').on('click',function () {
            var data = $("#form").serializeArray();
            console.info(data);
            var postData = {};
            for (var key in data){
                postData[data[key].name] = data[key].value;
            }
            console.info(postData);
            $.ajax({
                url:"{$_form.install_test_DB_connect}",
                data:postData,
                type:"post",
                success:function (data) {
                    var d = JSON.parse(data);
                    console.info(d);
                    if (d.msg == 1){
                        $('#testDBConnect').removeClass('btn-warning');
                        $('#testDBConnect').removeClass('btn-danger');
                        $('#testDBConnect').addClass('btn-success');
                        $('#testDBConnect').text('连接成功');
                    }else{
                        $('#testDBConnect').removeClass('btn-warning');
                        $('#testDBConnect').removeClass('btn-success');
                        $('#testDBConnect').addClass('btn-danger');
                        $('#testDBConnect').text('连接失败');
                    }
                },
                error:function (err) {
                    $('#testDBConnect').removeClass('btn-warning');
                    $('#testDBConnect').removeClass('btn-success');
                    $('#testDBConnect').addClass('btn-danger');
                    $('#testDBConnect').text('网络异常');
                }
            });
            return false;
        });


    });
</script>
{/block}